// pages/songDetail/songDetail.js
import api from '../../../utils/request';
import pubSub from 'pubsub-js'
import moment from 'moment'
// 获取全局实例
const appInstance = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, // 音乐是否播放
    // 歌曲详细数据
    songsData: [],
    // 音乐id
    musicId: '',
    // 音乐链接
    musicLink: '',
    // 音乐总时长
    durationTime: '00:00',
    // 实时
    currentTime: '00:00',
    // 当前实时进度条宽度
    currentWidth: '',
    lyric: [],//歌词
    lyricTime: 0,//歌词对应的时间
    currentLyric: "",//当前歌词对象
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // options 用于接收路由跳转的 query 参数
    // console.log(options);
    // 获取当前musicId
    let musicId = options.musicId
    this.setData({
      musicId
    })
    // 获取歌曲详细信息
    this.getSongsData(musicId)
    this.getLyric(musicId);

    // 判断当前页面是否有音乐在播放
    if (appInstance.globalData.isMusicPlay && appInstance.globalData.musicId === musicId) {
      this.setData({
        isPlay: true
      })
    }
    // 创建控制播放音乐的实例，并挂载到this
    // console.log(appInstance);
    this.backgroundAudioManager = wx.getBackgroundAudioManager()
    // 监听音乐播放状态
    this.backgroundAudioManager.onPlay(() => {
      this.changeMusicState(true)
      appInstance.globalData.musicId = musicId
    })
    this.backgroundAudioManager.onPause(() => {
      this.changeMusicState(false)
    })
    this.backgroundAudioManager.onEnded(() => {
      // this.changeMusicState(false)
      // 唤醒页面通信
      this.pubSubCallback('next')
      this.setData({
        currentWidth: 0,
        currentTime: '00:00'
      })
    })
    this.backgroundAudioManager.onStop(() => {
      this.changeMusicState(false)
    })
    // 获取音频的实时时间
    this.backgroundAudioManager.onTimeUpdate(() => {
      //获取歌词对应时间
      let lyricTime = Math.ceil(this.backgroundAudioManager.currentTime);
      let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss')
      // 当前时间 / 总时长 = currentWidh / 450rpx
      let currentWidth = (this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration) * 450;
      this.setData({ currentTime, currentWidth, lyricTime })
      this.getCurrentLyric()
    })
  },
  // 修改播放状态功能函数封装
  changeMusicState(isPlay) {
    this.setData({
      isPlay
    })
    appInstance.globalData.isMusicPlay = isPlay
  },
  // 获取当前音乐的详情数据
  async getSongsData(musicId) {
    // console.log(musicId);
    let songsObj = await api.request('/song/detail', { ids: musicId })
    // console.log(songsObj);
    // 获取时长
    let durationTime = moment(songsObj.songs[0].dt).format('mm:ss')
    // console.log(durationTime);
    this.setData({
      songsData: songsObj.songs[0],
      durationTime
    })
    // 动态的修改页面的标题
    wx.setNavigationBarTitle({
      title: this.data.songsData.name,
    })
    // 自动播放当前获取音乐
    this.musicControl(true)
  },

  // 获取歌词
  async getLyric(musicId) {
    let lyricData = await api.request('/lyric', { id: musicId })
    // console.log(lyricData);
    this.setData({
      lyric: [],
      currentLyric: ''
    })
    // 纯音乐识别判断
    if (!lyricData.nolyric && lyricData.lrc.lyric) {
      this.formatLyric(lyricData.lrc.lyric);
    } else {
      this.setData({
        currentLyric: '此歌曲为纯音乐欣赏~'
      })
    }
  },
  // 格式化歌词文本
  formatLyric(text) {
    let result = [];
    let arr = text.split("\n"); //原歌词文本已经换好行了方便很多，我们直接通过换行符“\n”进行切割
    // console.log(arr);
    let arrLen = arr.length; // 歌词行数
    for (let i = 0; i < arrLen; i++) {
      // console.log(arr[i])
      //现在每一行格式大概就是这样:
      // [00: 04.55]编曲: 刘志远;
      // [00:16.60]别抱有太多欲望
      // 二次分割：对时间和歌词文本进行分离
      let temp_arr = arr[i].split(']'); // ["[00:00.000", " 作词 : 曲世聪"]
      // console.log(temp_arr);
      let text = temp_arr.pop(); // 把歌词文本从数组中剔除出来，获取到歌词文本了！
      // 对歌词的时间进行处理
      temp_arr.forEach(item => {
        let obj = {}
        //先把多余的“[”去掉，再分离出分、秒
        let time_arr = item.substr(1, item.length - 1).split(':')
        //把时间转换成与currentTime相同的类型，方便待会实现滚动效果
        let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1])
        obj.time = s;
        obj.text = text;
        result.push(obj) //每一行歌词对象存到组件的lyric歌词属性里
      })
    }
    result.sort(this.sortRule) //由于不同时间的相同歌词我们给排到一起了，所以这里要以时间顺序重新排列一下
    this.setData({
      lyric: result
    })
  },
  sortRule(a, b) { //设置一下排序规则
    return a.time - b.time;
  },
  //控制歌词播放
  getCurrentLyric(){
    let j;
    for(j=0; j<this.data.lyric.length-1; j++){
      if(this.data.lyricTime == this.data.lyric[j].time){
        this.setData({
          currentLyric : this.data.lyric[j].text
        })
      }
    }
  },

  // 音乐的播放/暂停 回调
  musicPlay() {
    let isPlay = !this.data.isPlay;
    // 修改是否播放的状态
    this.setData({
      isPlay
    })
    // 调用音乐播放功能函数
    this.musicControl(isPlay, this.data.musicLink)
  },
  // 控制音乐播放/暂停的功能函数
  async musicControl(isPlay, musicLink) {
    if (isPlay) {// 音乐播放
      if (!musicLink) {
        // 获取播放音乐的链接地址
        let musicUrl = await api.request('/song/url', { id: this.data.musicId })
        musicLink = musicUrl.data[0].url
        // 获取到音乐链接实时更新
        this.setData({ musicLink })
      }
      // console.log(musicUrl);
      this.backgroundAudioManager.src = musicLink
      this.backgroundAudioManager.title = this.data.songsData.name
    } else { // 音乐暂停
      this.backgroundAudioManager.pause()
    }
  },
  // 点击切歌的回调
  handleSwitch(event) {
    // 获取切歌的类型
    let type = event.currentTarget.id
    // console.log(type);
    // 切歌之前，先关闭当前播放的歌曲
    this.backgroundAudioManager.stop()
    // 唤醒页面通信
    this.pubSubCallback(type)
  },
  // 页面通信pubsub-公共代码封装
  pubSubCallback(type) {
    // 订阅来自 recommendSongs页面发布的musicId
    pubSub.subscribe('musicId', (msg, musicId) => {
      // console.log(musicId);
      // 更新musicId
      this.setData({ musicId })
      // 更新音乐信息系
      this.getSongsData(musicId)
      // 更新歌词
      this.getLyric(musicId)
      // 自动播放当前获取音乐
      this.musicControl(true, musicId)
      // 取消订阅
      pubSub.unsubscribe('musicId')
    })
    // 发布消息给 recommendSong 页面
    pubSub.publish('switchType', type)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})